<template>
  <!-- 海报图样式 -->
  <view v-if="showShare">
    <view class="mask"></view>
    <view class="del_content">
      <view class="canvasImage" style="opacity:1" @click="previewImg"><image :src="poster" mode="widthFix" lazy-load="false"></image></view>
      <canvas style="width: 1000px; height: 1800px; transform: scale(0.5); background-color: #FFFFFF;" canvas-id="ctx" class="cas"></canvas>
      <view class="saveImage" style="opacity:1"><view class="saveImage-text" @click="savePoster">保存图片到相册</view></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    showShare: String,
    goodsPath: String,
    shareImage: String
  },

  data() {
    return {
      poster: ''
    };
  },

  created() {
    if (this.showShare) {
      this.drawImage();
    }
  },
  watch: {
    showShare: function(newVal, oldVal) {
      this.showShare = newVal;
      if (this.showShare) {
      }
    }
  },

  mounted() {},

  methods: {
    // 海报图分享
    drawImage() {
      let pdpUrl = '/pages/item/item?id=' + this.goodsId + '&valueId=' + this.valueId + '&valueName=' + this.colorName;
      this.goodsPath = 'id=' + this.goodsId + '&valueId=' + this.valueId + '&valueName=' + this.colorName;
      let that = this;
      let code =
        'https://www.cosstores.cn:443/cos/cloud-qrcode-service/qrcode?qrcode_data=https%3A%2F%2Fwww.cosstores.cn%2Fitem%2Fredirect%3Fitem_code%3D0865919%26value_name%3D%E7%B2%89%E8%89%B2%26user_name%3DCOS%3APDP%26front_code%3D0865919005%26utm_source%3DPDP0326%26utm_medium%3Dpdp';
      let bg = 'https://www.cosstores.cn/img/459284690487087104/568586871148650496/604087110173204480/01_0568609_007_4.jpg';

      //2下载图片
      uni.getImageInfo({
        src: code, // 图片路径，可以使相对路径，临时文件路径，存储文件路径，网络图片路径
        success: res0 => {
          uni.getImageInfo({
            src: bg,
            success: res1 => {

              // 3 使用canvans画图片,画到画布上
              let ctx = wx.createCanvasContext('ctx');

              ctx.setFillStyle('#FFFFFF');
              ctx.fillRect(10, 10, res1.width, res1.height);

              // ctx.drawImage(图片的路径, 原图的x, 原图的y, 原图的宽, 原图的高,画布的x, 画布的y, 画多宽, 画多高)
              // 背景图画好了
              ctx.drawImage(res1.path, 0, 0, res1.width, res1.height, 0, 0, 600, 1000);
              // 画小程序二维码图片
              ctx.drawImage(res0.path, 0, 0, res0.width, res0.height, 0, 1400, 300, 300);

              // 画文字
              ctx.setFillStyle('#FFA200'); // 文字颜色
              //设置文字的大小
              ctx.setFontSize(40);
              //画出来文字
              // ctx.fillText(this.detail.itemName,20,1200)
              // ctx.fillText(this.price,20,1300)
              ctx.fillText('长按识别太阳码', 400, 1400);
              ctx.fillText('分享自小程序', 400, 1500);

              // 5、生成一张图片
              ctx.draw(false, () => {
                // 6、要生成图片，必须在draw的回调函数中生成，否则无效
                uni.canvasToTempFilePath({
                  canvasId: 'ctx',
                  destWidth: 800, //生成多宽
                  destHeight: 1000, //生成多高
                  success: res => {
                    that.poster = res.tempFilePath;

                    // 预览图片，预览后可长按保存或者分享给朋友
                    uni.previewImage({
                      current: res.tempFilePath,
                      urls: [res.tempFilePath]
                    });
                  }
                });
              });
            },
            fail: () => {},
            complete: () => {}
          });
        }
      });
    },

    // 图片预览
    previewImg() {
      if (this.poster) {
        //预览图片，预览后可长按保存或者分享给朋友
        wx.previewImage({
          urls: [this.poster]
        });
      }
    },

    // 保存图片
    savePoster() {
      if (this.poster) {
        wx.saveImageToPhotosAlbum({
          filePath: this.poster,
          success: result => {
            this.showShare = false;
            this.$emit('clickTap', false);
            wx.showToast({
              title: '海报已保存，快去分享给好友吧。',
              icon: 'none'
            });
          }
        });
      }
    }
  }
};
</script>

<style lang="less">
/* 遮罩层 */
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: 1005;
  opacity: 0.5;
}

.del_content {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2005;
  opacity: 1 !important;
}

.canvasImage {
  display: flex;
  justify-content: center;
  width: 80%;
  height: 78%;
  margin: 30px 0 10px 0;
  background-color: #ffffff;
  margin: 0 auto;
  margin-top: 30px;
}

.saveImage {
  width: 100%;
  height: 14%;
  background-color: #ffffff;
  text-align: center;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
}

.saveImage-text {
  width: 100%;
  padding: 10px 0;
  color: #fff;
  background-color: #000000;
}
</style>
